<template>
  <lay-container class="menu-container">
    <!-- 左部标志包括列表 -->
    <div class="left">
      <div class="icon">
        <svg-icon v-if="mark" icon-name="erji" className="icon1"></svg-icon>
        <span>xzw-music</span>
      </div>
      <div class="menu-list">
        <template v-for="(item, index) in list" :key="index">
          <slot v-if="item.slot" :name="item.slot"></slot>
          <div class="item" @click="handleItem(item, index)" v-else>
            {{ item.name }}
            <div class="down-line" v-show="active == index"></div>
          </div>
        </template>
      </div>
    </div>
    <!-- 右部头像切换主题 -->
    <div class="right">
      <drop-down @itemClick="handleClick($event, 'theme')" :list="themeList" >
        <svg-icon v-if="theme" icon-name="theme" className="icon2"> </svg-icon>
      </drop-down>
      <drop-down :list="settings" @itemClick="handleClick($event, 'user')" placement="bottom-end"
        ><div class="user">
          <x-avart :src="userInfor?.img_url" v-if="userInfor.userNo" iconSize="12px" :grade="userInfor.vipGrade"></x-avart>
          <!-- <x-img :src="$store.state.userInfor?.img_url" v-if="$store.state.userInfor" /> -->
          <svg-icon
            v-else
            iconName="nologin"
            className="onlogin"
          ></svg-icon></div
      ></drop-down>
    </div>
  </lay-container>
</template>

<script>
import { themeList } from '@/common/js/theme'
import { reactive, toRefs, computed } from 'vue'
import {userInfor} from '@/hooks/userInfor'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import * as axiosApi from '@/views/login/api'

export default {
  props: {
    //标志
    mark: {
      type: Boolean,
      default() {
        return true
      }
    },
    //下拉主题
    theme: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 列表
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const _data = reactive({
      active: 0
    })
    const settings = computed(() => {
      if (userInfor.value.userNo) {
        return [
          {
            label: '个人主页',
            icon: 'wode'
          },
          {
            label: '退出登录',
            icon: 'logout'
          }
        ]
      } else {
        return [
          {
            label: '立即登录',
            icon: 'login'
          }
        ]
      }
    })

    const handleClick = (item, type) => {
      if (type === 'theme') {
        document.documentElement.setAttribute('class', item.type)
      } else if (type === 'user') {
        if (item.icon === 'wode') {
          router.push('/user')
        } else if (item.icon === 'logout') {
          axiosApi.logout().then(() => {
            store.commit('CLEARUSERINFOR')
            location.reload()
          })
        } else if (item.icon === 'login') {
          router.push('/login')
        }
      }
    }
    const handleItem = (item, index) => {
      _data.active = index
      router.push(item.path)
    }
    return {
      ...toRefs(_data),
      userInfor,
      handleItem,
      themeList,
      handleClick,
      settings
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-container {
  display: flex;
  justify-content: space-between;
  height: 60px;
  box-sizing: border-box;
  color: var(--color);
  background-color: var(--bg-color);
  @extend.com-show;
  .left {
    display: flex;
    .icon {
      display: flex;
      align-items: center;
      font-size: 39px;
      margin-right: 15px;
      .icon1 {
        margin-right: 10px;
        width: 60px;
        height: 60px;
      }
    }
    .menu-list {
      display: flex;
      align-items: center;
      .item {
        position: relative;
        height: 100%;
        line-height: 60px;
        padding: 0 20px;
        &:hover {
          cursor: pointer;
        }
        .down-line {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3px;
          background-color: var(--border-color2);
        }
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .icon2 {
      margin-right: 10px;
      width: 30px;
      height: 30px;
      color: var(--color);
    }
    .user {
      display: flex;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      // overflow: hidden;
      align-items: center;
      justify-content: center;
      .onlogin {
        width: 70%;
        height: 70%;
        color: var(--color);
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
